<template>
    <n-config-provider
        class="h-full"
        :theme="darkTheme"
        :theme-overrides="overridesTheme"
    >
        <naive-provider>
            <router-view v-slot="{ Component }">
                <transition name="fade" mode="out-in">
                    <component :is="Component"/>
                </transition>
            </router-view>
        </naive-provider>
        <n-global-style></n-global-style>
    </n-config-provider>
</template>

<script setup lang="ts">
import NaiveProvider from "@/components/NaiveProvider.vue";
import {RouterView} from 'vue-router'
import {useDarkThemeHook, useThemeOverridesHook} from "@/hooks/useTheme.hook";
import {useSseStore} from "@/stores";
import {onMounted, onUnmounted} from "vue";

// 暗黑主题
const darkTheme = useDarkThemeHook()

// 主题配置
const overridesTheme = useThemeOverridesHook()


const sseStore = useSseStore();

let eventSource: EventSource = null;
const configSSE = (url) => {
    console.log("开始连接SSE")
    eventSource = new EventSource(url);
    // eventSource = new EventSource('/sse');
    eventSource.onopen = () => {
        console.log("SSE 连接成功");
    }
    eventSource.onmessage = (event) => {
        let jsonObject = JSON.parse(event.data);
        if (jsonObject.type == "time") {
            sseStore.message_time = jsonObject.body
        } else if (jsonObject.type == "datetime") {
            sseStore.message_datetime = jsonObject.body
        } else if (jsonObject.type == "user_count") {
            sseStore.user_count = jsonObject.body
        } else if (jsonObject.type == "pipeline_count") {
            sseStore.pipeline_count = jsonObject.body
        } else if (jsonObject.type == "webhook_count") {
            sseStore.webhook_count = jsonObject.body
        } else if (jsonObject.type == "pipeline_list") {
            sseStore.pipeline_list = jsonObject.body
        } else if (jsonObject.type == "webhook_list") {
            sseStore.webhook_list = jsonObject.body
        } else if (jsonObject.type == "webhook_status") {
            sseStore.changeWebhookStatus(jsonObject.body)
            // sseStore.webhook_list.forEach(item => {
            //     if (item.id == jsonObject.body.id) {
            //         item.status = jsonObject.body.status
            //     }
            // })
        } else if (jsonObject.type == "pipeline_status") {
            sseStore.changePipelineStatus(jsonObject.body)
            // sseStore.pipeline_list.forEach(item => {
            //     if (item.id == jsonObject.body.id) {
            //         item.status = jsonObject.body.status
            //     }
            // })
        }

        // console.log("收到消息类型:", event.type)
        console.log("收到消息内容:", event.data)
    };

    eventSource.onerror = (error) => {
        console.error("SSE 连接出错：", error);
        // setTimeout(() => {
        //     console.log("开始连接SSE")
        //     eventSource = new EventSource(url);
        // }, 10000)

        // eventSource.close();
    };
}

onMounted(() => {
    configSSE(import.meta.env.VITE_API_BASE_URL + '/sse');
})
onUnmounted(() => {
    if (eventSource) {
        console.log("关闭SSE连接");
        eventSource.close();
    }
});

</script>

<style lang="scss" scoped></style>
